<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <el-button :icon="Plus" color="#1baeae">增加</el-button>
        <el-button :icon="DeleteFilled" color="#f56c6c">批量删除</el-button>
      </div>
    </template>

    <el-table :data="swiperList.list">
      <el-table-column type="selection" width="55" />
      <el-table-column prop="carouselUrl" label="轮播图" width="100">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <el-image
              :preview-src-list="carouselUrl"
              style="width: 100px; height: 100px"
              :src="scope.row.carouselUrl"
              fit="contain"
            />
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="redirectUrl" label="跳转链接">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <a href="" style="color: '#409eff'">{{ scope.row.redirectUrl }}</a>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="carouselRank" label="排序值"/>
      <el-table-column prop="createTime" label="添加时间"/>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button
            type="text"
            key="primary"
            size="small"
            @click="handleClick(scope.row)"
            >修改</el-button
          >
          <el-button
            type="text"
            key="primary"
            size="small"
            @click="deleteClick(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script setup>
import { Plus, DeleteFilled } from "@element-plus/icons-vue";
import { onMounted, reactive } from "vue";
import axios from "axios";
let swiperList = reactive({
  list: [],
});
console.log(swiperList);
axios
  .get(
    "http://backend-api-02.newbee.ltd/manage-api/v1/carousels?pageNumber=1&pageSize=10",
    {
      headers: {
        token: localStorage.getItem("token"),
      },
    }
  )
  .then((res) => {
    console.log(res.data);
    swiperList.list = res.data.data.list;
    console.log(swiperList);
  });
const handleClick = (index) => {
  console.log(index);
};
const deleteClick = (index) => {
  console.log(index);
};
</script>

<style scoped lang="scss">
.card-header {
  .el-button {
    color: #fff;
  }
}
a {
  color: "#409eff";
}
</style>